<template>
  <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
    <el-form-item prop="username">
      <el-input v-model="loginForm.username" placeholder="用户名：随便填">
        <template #prefix>
          <el-icon class="el-input__icon"><user /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password" placeholder="密码：随便填" show-password autocomplete="new-password">
        <template #prefix>
          <el-icon class="el-input__icon"><lock /></el-icon>
        </template>
      </el-input>
    </el-form-item>
  </el-form>
  <div class="login-btn">
    <el-button @click="login(loginFormRef)" size="large" type="primary" :loading="loading"> 登录 </el-button>
    <el-button @click="resetForm(loginFormRef)" size="large">重置</el-button>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import {useUserStore} from '@/pinia/modules/user'
import {reqLogin} from "@/api/base";

const router = useRouter();
const userStore = useUserStore()

// 定义 formRef（校验规则）
const loginFormRef = ref();
const loginRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});

const loading = ref(false);
const loginForm = reactive({ username: "", password: "" });
const login = formEl => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    loading.value = true;
    try {
      let formData = {
        username: loginForm.username,
        password: loginForm.password
      }
      let data = await reqLogin(formData)
      userStore.setToken(data.token)
      userStore.ResetUserInfo(data)
      router.push({name: 'home'});
    } finally {
      loading.value = false;
    }
  });
};

// resetForm
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="scss"></style>